<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1600px;height:1400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var locations = [{
        name: '上海',
        coord: [121.472644, 31.231706]
    }, {
        name: '北京',
        coord: [116.405285, 39.904989]
    }, {
        name: '广东',
        coord: [113.280637, 23.839463714285714]
    }];
    option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}'
        },
        series: [
            {
                name: '中国',
                type: 'map',
                mapType: 'china',
                selectedMode : 'multiple',
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                }
            }
        ]
    };

    var currentLoc = 0;
    app.timeTicket = setInterval(function () {
        myChart.setOption({
            series: [{
                center: locations[currentLoc].coord,
                zoom: 4,
                data:[
                    {name: locations[currentLoc].name, selected: true}
                ],
                animationDurationUpdate: 1000,
                animationEasingUpdate: 'cubicInOut'
            }]
        });
        currentLoc = (currentLoc + 1) % locations.length;
    }, 2000);
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>